<#assign content>
<div class="right_col" role="main">
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <h3>销量统计图</h3>
            </div>
            <div class="title_right">
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="row">
                        <div class='col-sm-5'>
                            <div class="form-group">
                                <label>选择开始时间：</label>
                                <!--指定 date标记-->
                                <div class='input-group date' id='datetimepicker1'>
                                    <input type='text' class="form-control" id="startTime" value="${startTime}"/>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class='col-sm-5'>
                            <div class="form-group">
                                <label>选择结束时间：</label>
                                <!--指定 date标记-->
                                <div class='input-group date' id='datetimepicker2'>
                                    <input type='text' class="form-control" id="endTime" value="${endTime}"/>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class='col-sm-2'>
                            <div class="form-group">
                                <div class="input-group" style="padding-top: 24px">
                                    <button id="search" class="btn btn-success">搜索</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <#--<div class="x_title">
                        <h2>
                            <small>

                            </small>
                        </h2>
                        <div class="clearfix"></div>
                    </div>-->

                    <div class="x_content">
                        <p class="text-muted font-13 m-b-30">

                        </p>
                        <#--<canvas id="myChart" width="400" height="400"></canvas>-->

                        <div class="chart-container" style="position: relative; height:70vh; width:70vw">
                            <canvas id="chart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</#assign>
<#include "../_inc/layout.ftl" />
<script src="js/chart.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script>

    var ctx = document.getElementById("chart").getContext('2d');
    var myChart = new Chart(ctx, {
        //柱状图：bar 环形图：doughnut 饼状图：pie
        type: 'pie',
        data: {
            labels: [${salesLable}],
            datasets: [{
                label: '# of Votes',
                data: [${salesData}],
                backgroundColor: [${backgroundColor}],
                borderColor: [${borderColor}],
                borderWidth: 1
            }]
        },
        options: {
            title: {
                display: false,
                text: '机台销售数量'
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });

    $(function () {
        var picker1 = $('#datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn'),
            //minDate: '2016-7-1'
            defaultDate: new Date()
        });
        var picker2 = $('#datetimepicker2').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn'),
            defaultDate: new Date()
        });
        //动态设置最小值
        picker1.on('dp.change', function (e) {
            //picker2.data('DateTimePicker').minDate(e.date);
        });
        //动态设置最大值
        picker2.on('dp.change', function (e) {
            //picker1.data('DateTimePicker').maxDate(e.date);
        });

        $('#search').click(function() {
            var param = {};
            param.startTime = $('#startTime').val();
            param.endTime = $('#endTime').val();
            $.submitFormPost('/sales_pie.do', param, 'POST');
        });
    });

</script>

